<template>
  <div>
    <div class="drawer_screen" @click="showCartList"></div>
    <div class="cart_list-float">
      <div style='background:#F0F0F0;height:35px;line-height:35px;'>
        <label class='label-cart-bar'>
          <label style='padding:5px'>已选商品</label>
        </label>
        <label class='icon-clear' @click='clearCartList'>
          <div class="zan-icon zan-icon-delete" style="font-size:13px;padding-right:5px;"></div>
          <label class="label-clear">清空购物车</label>
        </label>
      </div>
      <div :class="cart_length>5?'cart-scroll-list':'cart-scroll'">
        <div class='cart-list-box' v-for="(item,index) in cart_list" :key="index">
          <div class='list-info'>
            <div style="height:25px;line-height:25px;">{{item.product_name}}</div>
            <div class='list-info-size'>{{item.detail}}</div>
          </div>
          <div style='width:50%;'>
            <div style="display:flex;height:50px;justify-content:flex-end;align-items:center;">
              <div class='activity-color' style="padding-right:30px;">¥ {{item.sum_price/100}}</div>
              <div class="iconfont icon-jianhao" style="font-size:23px;" @click="reduceNumber(item,index)"></div>
              <div style="padding-left:6px;padding-right:6px;">{{item.num}}</div>
              <div class="iconfont icon-jiahao" style="font-size:27px;padding-right:12px;" @click="addNumber(item,index)"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      
    }
  },
  computed: {
    ...mapGetters([
      'cart_list',
      'cart_length'
    ])
  },
  methods: {
    ...mapActions([
      'setCartListStatus',
      'setCartList',
      'setCartLength',
      'setCupNumber',
      'setSumMonney'
    ]),
    showCartList(){
      this.setCartListStatus(false)
    },
    clearCartList(){
      this.setCartListStatus(false)
      this.setCartList([])
      this.setSumMonney(0)
    },
    reduceNumber(proList,index){
      if (proList.num>1) {
        this.cart_list[index].num -= 1
        let sumPrice = proList.price
        proList.product_attrs.forEach(attr=>{
          sumPrice += attr.price
        })
        this.cart_list[index].sum_price -= sumPrice
      } else {
        this.cart_list.splice(index,1)
        this.setCartLength(this.cart_list.length)
      }
      this.setCartList(this.cart_list)

      //计算底部菜单的数量、总价格
      let cup_number = 0
      let sum_monney = 0
      this.cart_list.forEach(item=>{
        cup_number += item.num
        sum_monney += item.sum_price
      })
      this.setCupNumber(cup_number)
      this.setSumMonney(sum_monney)
      if (cup_number == 0) {
        this.setCartListStatus(false)
      }
    },
    addNumber(proList,index){
      this.cart_list[index].num += 1
      let sumPrice = proList.price
      proList.product_attrs.forEach(attr=>{
        sumPrice += attr.price
      })
      this.cart_list[index].sum_price += sumPrice
      this.setCartList(this.cart_list)
      //计算底部菜单的数量、总价格
      let cup_number = 0
      let sum_monney = 0
      this.cart_list.forEach(item=>{
        cup_number += item.num
        sum_monney += item.sum_price
      })
      this.setCupNumber(cup_number)
      this.setSumMonney(sum_monney)
    }
  }
}
</script>

<style >
.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}
.cart_list-float{
  width: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 1001;
  bottom: 55px;
  max-height: 325px;
}
.label-cart-bar{
  color:#878787;
  font-size:14px;
  border-left:4px solid black;
  margin-left: 10px;
}
.icon-clear{
  color:#878787;
  float: right;
  margin-right: 15px;
}
.label-clear{
  font-size: 14px;
}
.cart-scroll-list{
  width: 100%;
  height:280px;
  overflow-y: scroll;
}
.cart-scroll{
  width: 100%;
}
.cart-list-box{
  width: 100%;
  height: 50px;
  background:#FFFFFF;
  display:flex;
  font-size:15px;
  border-bottom:1px #E3E3E3 solid;
}
.list-info{
  width: 50%;
  height: 50px;
  padding-left: 10px;
}
.list-info-size{
  font-size:13px;
  color:#B1B1B1;
  height: 20px;
  line-height: 20px;
}
.activity-color{
  color:#F05A86;
  margin-right: 10px;
}

</style>
